@charset "utf-8";

//样式里的l,m,r,t,b分别代表左，中，右，上，下
//布局
main {

  div {
    //outline: 1px dashed orange;
  }

  .l, .m, .r {
    flex: 0 0 33.33%;
    display: flex;
    flex-direction: column;
    overflow: hidden; //可以让元素严格按照百分比显示，而防止被内部大尺寸元素撑住
  }

  .l > div, .m > div, .r > div {
    display: flex;
    flex: 0 0 50%;
    padding: 1rem;
  }

  .chart-wrap {
    border: .0625rem solid rgba(76, 180, 231, 0.33);

    display: flex;
    flex: 1;
    flex-direction: column;

    .chart {
      flex: 1;
      height: 0; //这样可以不让内部元素撑住高度而破坏布局比例
    }
  }

}